import React, { Component } from 'react';
import Styled from 'styled-components';
import { Form, Icon, Input, Button } from 'antd';
import http from '@/utils/http';
import { CAPTCHA_URL, CAPTCHA_SERVICE, LOGIN_SERVICE } from '@/utils/http/config';

const Box = Styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #F3F3F3;
  > .login-form {
    width: 320px;
    padding: 20px 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background-color: #FFFFFF;
    > .login-logo {
      height: 40px;
      line-height: 40px;
      margin-bottom: 24px;
      text-align: center;
      font-size: 20px;
      font-weight: bolder;
    }
  }
`;

const ImgItem = Styled.div`
  display: flex;
  height: 32px;
  > img {
    width: 95px;
    margin-left: 25px;
    border-radius: 4px;
    cursor: pointer;
  }
`;

class Login extends Component {

  constructor(props) {
    super(props);
    this.state = {
      captchaImg: null
    };
    this.signature = '';
  }

  componentDidMount() {
    this.queryCaptcha();
    document.getElementById('form_login_username').focus();
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((errors, values) => {
      if (!errors) {
        http.post(LOGIN_SERVICE, {...values, signature: this.signature}).then(response => {
          // 登录后，刷新页面
          const data = response.data
          localStorage.setItem('__rs', data.id)
          localStorage.setItem('__rstk', data.token)
          this.props.history.push('/');
        }, () => {
          this.queryCaptcha();
        });
      }
    });
  };

  queryCaptcha() {
    http.get(CAPTCHA_URL + CAPTCHA_SERVICE, {
      responseType: 'blob'
    }).then(response => {
      this.signature = response.headers.etag;
      this.props.form.setFields({ captcha: '' });
      this.setState({
        captchaImg: URL.createObjectURL(response.data)
      });
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Box>
        <div className="login-form" >
          <div className="login-logo">后台管理系统</div>
          <Form onSubmit={this.handleSubmit.bind(this)}>
            <Form.Item>
              {getFieldDecorator('username', {
                rules: [{ required: true, message: '请输入用户名!' }],
              })(
                <Input prefix={<Icon type="user" />} placeholder="请输入用户名" />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: '请输入密码!' }],
              })(
                <Input prefix={<Icon type="lock" />} type="password" placeholder="请输入密码" />
              )}
            </Form.Item>
            <Form.Item>
              <ImgItem>
                {getFieldDecorator('captcha', {
                  rules: [{ len: 4, required: true, message: '请输入4位字符验证码!' }],
                })(
                  <Input allowClear placeholder="请输入验证码" />
                )}
                <img src={this.state.captchaImg} onClick={this.queryCaptcha.bind(this)} alt="" />
              </ImgItem>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" block>登录</Button>
            </Form.Item>
          </Form>
        </div>
      </Box>
    );
  }
}

export default Form.create({ name: 'form_login' })(Login);
